:local{
  $my-yellow: greenyellow;
  $my-font-size: 20px;

  .test {
    /*background-color: $my-yellow;
    font-size: $my_font_size;*/

    .div1 {
      background-color: red;

      .div2 {
        background-color: greenyellow;

        .div3 {
          background-color: yellow;

          .div4 {
            background-color: gray;

            .div5 {
              background-color: gold;

              .div6 {
                background-color: black;

                .div7 {
                  background-color: blue;

                  .div8 {
                    background-color: darkseagreen;
                  }
                }
              }
            }
          }
        }
      }
    }

    .div1 {
      position: relative;
      top: 20px;

      .div4 {
        font-size: 30px;

        .div8 {
          color: white;
        }
      }
    }

    .div4 .div7:before {
      content: '1234';
    }

    .div4 {
      &:hover {
        color: white;
      }
    }

    .div6 {
      /*font{*/
      /*  &-size:35px;*/
      /*  &-weight: bold;*/
      /*}*/
    }

    .div3 {
      h1, h2, h3 {
        margin-bottom: 20px
      }
    }

    .test1 div {
      color: red;
    }

    .test1 > div {
      border-bottom: 1px solid #ccc
    }

    .test2 div {
      color: black;
    }

    .test2 + div {
      border-bottom: 1px solid red
    }

    .test3 div {
      color: blue;
    }

    .test3 ~ div {
      font: {
        size: 30px;
        weight: bold;
      }
    }

    .test4{
      font: {
        size: 40px;
        weight: bold;
      }
    }
  }
}
